<template>
  <div id="app">
    <div class="account">
      <div class="price">
        总价：
        <span>{{'￥'+(((seller.prePrice).substring(1))*number)}}</span>
      </div>
      <div :class="{add:true,chose_goods:true,hide:this.pos}" @click="addShow">{{tips}}</div>
      <div :class="{add:true,chose_goods:true,hide:!this.pos}" @click="addGoods">{{tips}}</div>
      <div class="mai">立即购买</div>
    </div>
    <div :class="{box:true,hide:isShow}"></div>
    <div :class="{choseGoods:true,hide:isShow}">
      <div class="top">
        <div class="pic">
          <img :src="'/'+seller.url" class="imgtou"/>
        </div>
        <div class="ofdetail">
          <span>{{seller.prePrice}}</span>
          <span>库存123456件</span>
          <span>请选择商品属性</span>
        </div>
        <div class="lock">
          <img src="/static/img/关闭.png" @click="lock" />
        </div>
      </div>
      <div class="numshu">
        <div class="lef_num">购买数量</div>
        <div class="rig_num">
          <span class="btnspan btnsub" @click="btnsub()">-</span>
          <span class="number">{{number}}</span>
          <span class="btnspan btnadd" @click="btnadd()">+</span>
        </div>
      </div>
      <div class="size">
        <div class="titsize">大小</div>
        <div class="sizekinds">
          <span :class="{sizekindschecked:kindShow==1}" @click="kShow()">1L</span>
          <span :class="{sizekindschecked:kindShow==2}" @click="kShow2()">2L</span>
          <span :class="{sizekindschecked:kindShow==3}" @click="kShow3()">3L</span>
          <span :class="{sizekindschecked:kindShow==4}" @click="kShow4()">4L</span>
        </div>
      </div>
      <div class="ages">
        <div class="titages">年龄</div>
        <div class="ageskinds">
          <span :class="{ageskindschecked:ageShow==1}" @click="aShow()">5岁以下</span>
          <span :class="{ageskindschecked:ageShow==2}" @click="aShow2()">3岁以下</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as types from '@/store/mutation-type'
export default {
  name: 'Account',
  props: ['seller'],
  data () {
    return {
      tips: '加入购物车',
      isShow: true,
      pos: false,
      number: 1,
      kindShow: 1,
      ageShow: 1
    }
  },
  methods: {
    addShow () {
      this.isShow = false
      this.pos = !this.pos
      this.tips = '加入选择'
    },
    addGoods () {
      this.$store.commit(types.ADD_SHOP_CARD, {
        number: this.number
      })
      console.log(this.number)
      this.pos = !this.pos
      if (confirm('确定选择好商品了吗？')) {
        this.$router.push('/mall')
        alert('恭喜你！加入成功')
      } else {
        return false
      }
    },
    lock () {
      this.isShow = true
      this.pos = !this.pos
      this.chose_goods = false
      this.tips = '加入购物车'
    },
    btnsub () {
      if (this.number <= 0) {
        this.number = 0
      } else {
        this.number--
      }
    },
    btnadd () {
      this.number++
    },
    kShow: function () {
      this.kindShow = 1
    },
    kShow2: function () {
      this.kindShow = 2
    },
    kShow3: function () {
      this.kindShow = 3
    },
    kShow4: function () {
      this.kindShow = 4
    },
    aShow: function () {
      this.ageShow = 1
    },
    aShow2: function () {
      this.ageShow = 2
    }
  }
}
window.addEventListener('add', e => e.preventDefault())
</script>

<style lang="less" scoped>
.hide{
  display: none;
}
.box {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
}
.account {
  height: 1.333333rem;
  line-height: 1.333333rem;
  width: 100%;
  background: #ffffff;
  border-top: 1px solid #ddd;
  position: fixed;
  bottom: 0;
  z-index: 9999;
  div {
    float: left;
  }
  .price {
    font-size: 0.398rem;
    color: #666666;
    width: 4.6rem;
    margin-left: 0.35rem;
    span {
      color: red;
    }
  }
  .add,
  .mai {
    width: 2.52rem;
    height: 1.3rem;
    font-size: 0.398rem;
    line-height: 1.3rem;
    text-align: center;
    float: left;
    color: #ffffff;
  }
  .add {
    background: #ff9900;
  }
  .mai {
    background: #eb2222;
  }
}
.choseGoods {
  height: 8.26rem;
  width: 100%;
  position: fixed;
  bottom: 1.333333rem;
  background: #ffffff;
  .top {
    height: 1.746667rem;
    position: relative;
    margin-left: 0.57rem;
    .pic {
      position: absolute;
      top: -0.2rem;
      display: block;
      border: 0.028rem solid #ddd;
      .imgtou{
         width: 2rem;
         height: 2rem;
      }
    }
    .ofdetail {
      position: absolute;
      top: 0.6rem;
      left: 2.6rem;
      span {
        display: block;
        font-size: 0.333333rem;
        color: #333333;
      }
      span:first-child {
        color: red;
        font-size: 0.4rem;
      }
    }
    .lock {
      position: absolute;
      top: 0.3rem;
      right: 0.3rem;
    }
  }
  .numshu {
    height: 1.133333rem;
    margin-left: 0.57rem;
    line-height: 1.133333rem;
    .lef_num {
      float: left;
      font-size: 0.4rem;
      color: #333333;
    }
    .rig_num {
      float: right;
      margin-right: 0.575rem;
      width: 2.666667rem;
      height: 0.666667rem;
      line-height: 0.666667rem;
      border: 1px solid #888888;
      span {
        display: block;
        float: left;
        width: 0.666667rem;
        height: 0.666667rem;
        text-align: center;
        background: #999999;
        border-right: 1px solid #888888;
      }
      span:last-child {
        border-right: none;
      }
      .btnspan {
        color: #ffffff;
      }
      .number {
        width: 1.285rem;
        background: #ffffff;
      }
    }
  }
  .size {
    height: 1.933333rem;
    margin-top: 0.293333rem;
    margin-left: 0.57rem;
    .titsize {
      font-size: 0.4rem;
      color: #333333;
    }
    .sizekinds {
      margin-top: 0.293333rem;
      span {
        width: 1.6rem;
        display: inline-block;
        height: 0.666667rem;
        line-height: 0.666667rem;
        text-align: center;
        background: #dddddd;
        border: 1px solid #666666;
        border-radius: 0.066667rem;
      }
      .sizekindschecked {
        background: #ff9900;
        color: #ffffff;
      }
    }
  }
  .ages {
    height: 1.933333rem;
    margin-top: 0.293333rem;
    margin-left: 0.57rem;
    .titages {
      font-size: 0.4rem;
      color: #333333;
    }
    .ageskinds {
      margin-top: 0.293333rem;
      span {
        width: 2.333333rem;
        display: inline-block;
        height: 0.666667rem;
        line-height: 0.666667rem;
        text-align: center;
        background: #dddddd;
        border: 1px solid #666666;
        border-radius: 0.066667rem;
      }
      .ageskindschecked {
        background: #ff9900;
        color: #ffffff;
      }
    }
  }
}
</style>
